<template>
  <!--  这是主页，与视频播放、文章详情页面错开路由-->
  <MainCarousel />
  <MainMenu />
  <!-- 使用作用域插槽，大概是通过路由将VNode插进来 -->
  <div id="container">
    <router-view v-slot="{ Component }">
      <!-- <transition name="fade" mode="out-in">-->
      <component :is="Component" />
      <!-- </transition>-->
    </router-view>
  </div>
</template>

<script lang="ts">
import MainCarousel from "@/components/home/MainCarousel.vue";
import MainMenu from "@/components/home/MainMenu.vue";
import "@/style/global-transition.css";

export default {
  name: "HomeView",
  components: {
    MainCarousel,
    MainMenu,
  },
};
</script>

<style scoped>
#container {
  min-height: 100px;
}

.router-view {
  min-height: 1500px;
}

.van-slide-right-leave-active {
  display: none;
}

.fade-enter {
  visibility: hidden;
  opacity: 0;
}

.fade-leave-to {
  display: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 30s ease;
}

.fade-enter-to,
.fade-leave {
  visibility: visible;
  opacity: 1;
}
</style>
